<template>
  <div class="batch-detail-modal">
    <Modal
      title="批量代扣批次详情列表"
      width="1200"
      footer-hide
      v-model="show"
      :mask-closable="false"
    >
      <div class="search-con">
        <Select 
          placeholder="请选择代扣结果"
          v-model="state" 
          style="margin-bottom: 10px;width: 200px;"
          @on-change="handleSelect"
          transfer>
          <Option :value="-1">全部代扣结果</Option>
          <Option :value="0">进行中</Option>
          <Option :value="1">成功</Option>
          <Option :value="2">失败</Option>
        </Select>
      </div>
      <Table
        class="batch-table"
        border
        :columns="columns"
        :data="list"
        :loading="loading"
      >
      </Table>
      <Page
        :total="total"
        :current.sync="page"
        :page-size-opts="[10, 20, 40, 80, 100]"
        show-total
        show-elevator
        show-sizer
        @on-change="handleCurrentChange"
        @on-page-size-change="handleSizeChange"
        style="margin: 30px 0;text-align: right;"></Page>
    </Modal>
  </div>
</template>

<script>
  const COMPONENT_NAME = 'batch-detail';
  import mixins from '@/libs/mixins';
  export default {
    name: COMPONENT_NAME,
    props: {
      value: Boolean,
      num: String
    },
    mixins: [ mixins ],
    data () {
      return {
        state: -1,
        page: 1,
        pageSize: 10,
        show: this.value,
        columns: [
          { title: '订单编号', key: 'orderNum', align: 'center' },
          { title: '姓名', key: 'name', align: 'center' },
          { title: '手机号', key: 'cellPhone', align: 'center' },
          { title: '订单时间', key: 'orderTime', align: 'center' },
          { title: '应还日期', key: 'latestPaymentDate', align: 'center' },
          { title: '待还金额', key: 'shouldRepayMoney', align: 'center' },
          { title: '逾期天数', key: 'yuqiDay', align: 'center' },
          { 
            title: '贷款产品',
            align: 'center',
            render: (h, params) => {
							const { loanProductNo } = params.row;
							return h('span', this.productFormat(loanProductNo));
						}
          },
          { 
            title: '代扣结果',
            key: 'state',
            align: 'center',
            render: (h, params) => {
              const { state, failReason } = params.row;
              return h('span', state === 0 ? '进行中' : state === 1 ? '成功' : `失败【${failReason}】`);
            }
          },
          { title: '扣款金额', key: 'deductMoney', align: 'center' }
        ],
        list: [],
        loading: true,
        total: 0
      }
    },
    watch: {
      value (val) {
        this.show = val;
        if (val) {
          this.getBatchWithholdDetail();
        }
      },
      show(val) {
        this.state = -1;
        this.page = 1;
        this.$emit('input', val);
      }
    },
    methods: {
      // 获取直投客户充值记录列表
      getBatchWithholdDetail () {
        this.loading = true;
        this.$http.get(`/helsinki/admin/batchWithhold/detail?batchNum=${this.num}&state=${this.state}&page=${this.page}&pageSize=${this.pageSize}`)
        .then(({ data: { errcode, info, data } }) => {
          if (errcode == 0) {
            this.list = data.list;
            this.total = data.size;
          }
          this.loading = false;
        }, err => {});
      },
      // 页码改变的回调，返回改变后的页码
      handleCurrentChange (val) {
        this.page = val;
        this.getBatchWithholdDetail();
      },
      // 切换每页条数时的回调，返回切换后的每页条数
      handleSizeChange (val) {
        this.pageSize = val;
        this.getBatchWithholdDetail();
      },
      // 代扣结果 change
      handleSelect(val) {
        this.page = 1;
        this.state = val;
        this.getBatchWithholdDetail();
      }
    }
  }
</script>

<style lang="scss">
  .batch-table {
    margin-bottom: 15px;
    .ivu-table-cell {
      padding-left: 8px;
      padding-right: 8px;
    }
  }
</style>
